/* -------------------------------------------------------------------------------

    Custom JS

    0.  Clear Form Inputs
    1.  Main Navigation
    2.  Main Slider
    3.  Image Slider
    4.  Project Carousel & Blog Carousel
    5.  Project Carousel (Alt. Version)
    6.  Responsive Videoout
    7.  Black & White Hover Effect
    8.  Accordion
    9.  Tabs
    10. Isotope
    11. Google Maps
    12. Contact Form

---------------------------------------------------------------------------------- */



jQuery(document).ready(function($) {


    /* --------------------------------------------------------------------------- */
    /*  0.  Clear Form Inputs
    /* --------------------------------------------------------------------------- */

//    $('input, textarea').bind('focusin', function() { if($(this).val() == $(this).attr('default-value')) { $(this).val(''); } });
//    $('input, textarea').bind('focusout', function() { if($(this).val() == '') { $(this).val( $(this).attr('default-value') ); } });





    /* --------------------------------------------------------------------------- */
    /*  1.  Main Navigation
    /* --------------------------------------------------------------------------- */
    
    var $navigation    = $('#navigation');
    
    // Regular nav
    $navigation.on('mouseenter', 'li', function() {
        var $this    = $(this),
            $subMenu = $this.children('ul');
        if( $subMenu.length ) $this.addClass('hover');
        $subMenu.hide().stop(true, true).fadeIn(150);
    }).on('mouseleave', 'li', function() {
        $(this).removeClass('hover').children('ul').stop(true, true).fadeOut(70);
    });

    // Responsive nav
    selectnav('navigation', {
        label: 'NAVIGATE...',
        autoselect: false,
        nested: true,
        indent: 'â€“-'
    });





    /* --------------------------------------------------------------------------- */
    /*  2.  Main Slider
    /* --------------------------------------------------------------------------- */

    $('#main-slider').flexslider({
        namespace           : "flex-",           //{NEW} String: Prefix string attached to the class of every element generated by the plugin
        selector            : ".slides > li",    //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
        animation           : "fade",            //String: Select your animation type, "fade" or "slide"
        easing              : "swing",           //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
        direction           : "horizontal",      //String: Select the sliding direction, "horizontal" or "vertical"
        reverse             : false,             //{NEW} Boolean: Reverse the animation direction
        animationLoop       : true,              //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
        smoothHeight        : false,             //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
        startAt             : 0,                 //Integer: The slide that the slider should start on. Array notation (0 = first slide)
        slideshow           : true,              //Boolean: Animate slider automatically
        slideshowSpeed      : 7000,              //Integer: Set the speed of the slideshow cycling, in milliseconds
        animationSpeed      : 600,               //Integer: Set the speed of animations, in milliseconds
        initDelay           : 0,                 //{NEW} Integer: Set an initialization delay, in milliseconds
        randomize           : false,             //Boolean: Randomize slide order
         
        // Usability features
        pauseOnAction       : true,              //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
        pauseOnHover        : false,             //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
        useCSS              : true,              //{NEW} Boolean: Slider will use CSS3 transitions if available
        touch               : true,              //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
        video               : false,             //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
         
        // Primary Controls
        controlNav          : true,              //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
        directionNav        : true,              //Boolean: Create navigation for previous/next navigation? (true/false)
        prevText            : "Previous",        //String: Set the text for the "previous" directionNav item
        nextText            : "Next",            //String: Set the text for the "next" directionNav item
         
        // Secondary Navigation
        keyboard            : true,              //Boolean: Allow slider navigating via keyboard left/right keys
        multipleKeyboard    : false,             //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
        mousewheel          : false,             //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
        pausePlay           : false,             //Boolean: Create pause/play dynamic element
        pauseText           : 'Pause',           //String: Set the text for the "pause" pausePlay item
        playText            : 'Play',            //String: Set the text for the "play" pausePlay item
         
        // Special properties
        controlsContainer   : "",                //{UPDATED} Selector: USE CLASS SELECTOR. Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be ".flexslider-container". Property is ignored if given element is not found.
        manualControls      : "",                //Selector: Declare custom control navigation. Examples would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
        sync                : "",                //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
        asNavFor            : "",                //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider
    });





    /* --------------------------------------------------------------------------- */
    /*  3.  Image Slider
    /* --------------------------------------------------------------------------- */

    $('#image-slider').flexslider({
        namespace           : "flex-",           //{NEW} String: Prefix string attached to the class of every element generated by the plugin
        selector            : ".slides > li",    //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
        animation           : "slide",            //String: Select your animation type, "fade" or "slide"
        easing              : "swing",           //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
        direction           : "horizontal",      //String: Select the sliding direction, "horizontal" or "vertical"
        reverse             : false,             //{NEW} Boolean: Reverse the animation direction
        animationLoop       : true,              //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
        smoothHeight        : false,             //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
        startAt             : 0,                 //Integer: The slide that the slider should start on. Array notation (0 = first slide)
        slideshow           : false,              //Boolean: Animate slider automatically
        slideshowSpeed      : 7000,              //Integer: Set the speed of the slideshow cycling, in milliseconds
        animationSpeed      : 600,               //Integer: Set the speed of animations, in milliseconds
        initDelay           : 0,                 //{NEW} Integer: Set an initialization delay, in milliseconds
        randomize           : false,             //Boolean: Randomize slide order
         
        // Usability features
        pauseOnAction       : true,              //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
        pauseOnHover        : false,             //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
        useCSS              : true,              //{NEW} Boolean: Slider will use CSS3 transitions if available
        touch               : true,              //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
        video               : false,             //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
         
        // Primary Controls
        controlNav          : false,              //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
        directionNav        : true,              //Boolean: Create navigation for previous/next navigation? (true/false)
        prevText            : "Previous",        //String: Set the text for the "previous" directionNav item
        nextText            : "Next",            //String: Set the text for the "next" directionNav item
         
        // Secondary Navigation
        keyboard            : true,              //Boolean: Allow slider navigating via keyboard left/right keys
        multipleKeyboard    : false,             //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
        mousewheel          : false,             //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
        pausePlay           : false,             //Boolean: Create pause/play dynamic element
        pauseText           : 'Pause',           //String: Set the text for the "pause" pausePlay item
        playText            : 'Play',            //String: Set the text for the "play" pausePlay item
         
        // Special properties
        controlsContainer   : "",                //{UPDATED} Selector: USE CLASS SELECTOR. Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be ".flexslider-container". Property is ignored if given element is not found.
        manualControls      : "",                //Selector: Declare custom control navigation. Examples would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
        sync                : "",                //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
        asNavFor            : "",                //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider
    });





    /* --------------------------------------------------------------------------- */
    /*  4.  Project Carousel & Blog Carousel
    /* --------------------------------------------------------------------------- */

    var $carousel = $('#project-wrapper, #blog-wrapper');


    // Project Carousel external controls
    function projectCarousel_initCallback( carousel ) {
        $('.jcarousel-control a').bind('click', function() { carousel.scroll(jcarousel.intval((this).text())); return false; });
        $('#project-next').bind('click', function() { carousel.next(); return false; });
        $('#project-prev').bind('click', function() { carousel.prev(); return false; });
    };
    $("#project-wrapper").jcarousel( {
        initCallback   : projectCarousel_initCallback,
        buttonNextHTML : null,
        buttonPrevHTML : null
    });


    // Blog Carousel external controls
    function blogCarousel_initCallback( carousel ) {
        $('.jcarousel-control a').bind('click', function() { carousel.scroll(jcarousel.intval((this).text())); return false; });
        $('#blog-next').bind('click', function() { carousel.next(); return false; });
        $('#blog-prev').bind('click', function() { carousel.prev(); return false; });
    };
    $("#blog-wrapper").jcarousel( {
        initCallback   : blogCarousel_initCallback,
        buttonNextHTML : null,
        buttonPrevHTML : null
    });


    if( $carousel.length ) {
        var scrollCount;

        function getWindowWidth() {
            if( $(window).width() < 480 ) {
                scrollCount = 1;
            } else if( $(window).width() < 768 ) {
                scrollCount = 1;
            } else if( $(window).width() < 960 ) {
                scrollCount = 2;
            } else {
                scrollCount = 3;
            }
        }

        function initCarousel( carousels ) {
            carousels.each(function() {
                var $this  = $(this);
                $this.jcarousel({
                    animation     : 600,
                    easing        : 'easeOutCubic',
                    scroll        : scrollCount
                });

            });
        }

        function adjustCarousel() {
            $carousel.each(function() {
                var $this    = $(this),
                    $lis     = $this.children('li')
                    newWidth = $lis.length * $lis.first().outerWidth( true ) + 100;
                getWindowWidth();

                if( $this.width() !== newWidth ) {
                    $this.css('width', newWidth )
                         .data('resize','true');
                    initCarousel( $this );
                    $this.jcarousel('scroll', 1);
                    var timer = window.setTimeout( function() {
                        window.clearTimeout( timer );
                        $this.data('resize', null);
                    }, 600 );
                }
            });
        }

        getWindowWidth();
        initCarousel( $carousel );

        // Window resize
        $(window).on('resize', function() {
            var timer = window.setTimeout( function() {
                window.clearTimeout( timer );
                adjustCarousel();
            }, 30 );
        });
    }





    /* --------------------------------------------------------------------------- */
    /*  5.  Project Carousel (Alt. Version)
    /* --------------------------------------------------------------------------- */

    var $carouselAlt = $('#project-wrapper-alt');

    if( $carouselAlt.length ) {
        var scrollCount;

        function getWindowWidth() {
            if( $(window).width() < 480 ) {
                scrollCount = 1;
            } else if( $(window).width() < 768 ) {
                scrollCount = 2;
            } else if( $(window).width() < 960 ) {
                scrollCount = 3;
            } else {
                scrollCount = 4;
            }
        }

        function initCarousel( carousels ) {
            carousels.each(function() {
                var $this  = $(this);
                $this.jcarousel({
                    animation     : 600,
                    easing        : 'easeOutCubic',
                    scroll        : scrollCount
                });
            });
        }

        function adjustCarousel() {
            $carouselAlt.each(function() {
                var $this    = $(this),
                    $lis     = $this.children('li')
                    newWidth = $lis.length * $lis.first().outerWidth( true ) + 100;
                getWindowWidth();

                if( $this.width() !== newWidth ) {
                    $this.css('width', newWidth )
                         .data('resize','true');
                    initCarousel( $this );
                    $this.jcarousel('scroll', 1);
                    var timer = window.setTimeout( function() {
                        window.clearTimeout( timer );
                        $this.data('resize', null);
                    }, 600 );
                }
            });
        }

        getWindowWidth();
        initCarousel( $carouselAlt );

        // Window resize
        $(window).on('resize', function() {
            var timer = window.setTimeout( function() {
                window.clearTimeout( timer );
                adjustCarousel();
            }, 30 );
        });
    }





    /* --------------------------------------------------------------------------- */
    /*  6.  Responsive Video
    /* --------------------------------------------------------------------------- */

    // Find all videos
    var $allVideos = $(".video"),
        // The element that is fluid width
        $fluidEl = $("#main");

    // Figure out and save aspect ratio for each video
    $allVideos.each(function() {
        $(this).data('aspectRatio', this.height / this.width)
        // and remove the hard coded width/height
        .removeAttr('height')
        .removeAttr('width');
    });

    // When the window is resized
    $(window).resize(function() {
        var newWidth = $fluidEl.width();
        // Resize all videos according to their own aspect ratio
        $allVideos.each(function() {
            var $el = $(this);
            $el
                .width(newWidth)
                .height(newWidth * $el.data('aspectRatio'));
        });
    // Kick off one resize to fix all videos on page load
    }).resize();





    /* --------------------------------------------------------------------------- */
    /*  7. Black & White Hover Effect
    /* --------------------------------------------------------------------------- */

    $('.bw-wrapper').BlackAndWhite( {
        hoverEffect : true, // default true
        speed : { //this property could also be just speed: value for both fadeIn and fadeOut
            fadeIn: 200,
            fadeOut: 200
        }
    });





    /* --------------------------------------------------------------------------- */
    /*  8.  Accordion
    /* --------------------------------------------------------------------------- */
     
    $('.accordion-button').on('click', function(e) {
        $('.accordion-button').removeClass('on');
        $('.accordion-content').slideUp('normal');
        if($(this).next().is(':hidden') == true) {
            $(this).addClass('on');
            $(this).next().slideDown('normal');
        }
        e.preventDefault();
     });

    $('.accordion-content').hide();

    $("#open").trigger('click');





    /* --------------------------------------------------------------------------- */
    /*  9.  Tabs
    /* --------------------------------------------------------------------------- */

    $("#tabs li").click(function() {
        $("#tabs li").removeClass('active');
        $(this).addClass("active");
        $(".tab-content").hide();
        var selected_tab = $(this).find("a").attr("href");
        $(selected_tab).fadeIn();
        return false;
    });

    $("#tabs").each(function() {
        var $this = $(this);
        $this.next().children('.tab-content').stop(true,true).hide().first().show();
        $this.children('li').first().addClass('active').stop(true,true).show();
    });





    /* --------------------------------------------------------------------------- */
    /*  10. Isotope
    /* --------------------------------------------------------------------------- */

    $(window).load(function(){
        var $container          = $('.project-feed');
        var $filter             = $('.project-feed-filter');
        
        // Initialize isotope 
        $container.isotope({
            filter              : '*',
            layoutMode          : 'fitRows',
            animationOptions    : {
            duration            : 750,
            easing              : 'linear'
            }
        }); 
        
        // Filter items when filter link is clicked
        $filter.find('a').click(function() {
            var selector = $(this).attr('data-filter');
            $filter.find('a').removeClass('current');
            $(this).addClass('current');
            $container.isotope({ 
                filter             : selector,
                animationOptions   : {
                animationDuration  : 750,
                easing             : 'linear',
                queue              : false,
                }
            });
            return false;
        }); 
    });





    /* --------------------------------------------------------------------------- */
    /*  11. Google Maps
    /* --------------------------------------------------------------------------- */

//    // Create an array of styles.
//    var styles = [
//        {
//            stylers: [
//                { saturation: -100 }
//            ]
//        },{
//            featureType: "road",
//            elementType: "geometry",
//            stylers: [
//                { lightness: 100 },
//                { visibility: "simplified" }
//            ]
//        },{
//            featureType: "road",
//            elementType: "labels",
//            stylers: [
//                { visibility: "off" }
//            ]
//        }
//    ];
//
//    // Create a new StyledMapType object, passing it the array of styles,
//    // as well as the name to be displayed on the map type control.
//    var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
//
//    // Create a map object, and include the MapTypeId to add
//    // to the map type control.
//    var $latlng = new google.maps.LatLng(55.6468, 37.581),
//        $mapOptions = {
//            zoom                    : 16,
//            center                  : $latlng,
//            panControl              : false,
//            zoomControl             : true,
//            scaleControl            : false,
//            mapTypeControl          : false,
//            mapTypeControlOptions   : {
//                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
//            }
//    };
//    var map = new google.maps.Map(document.getElementById('google-map'), $mapOptions);
//
//    //Associate the styled map with the MapTypeId and set it to display.
//    map.mapTypes.set('map_style', styledMap);
//    map.setMapTypeId('map_style');
//
//    var marker = new google.maps.Marker({
//        position: $latlng,
//        map: map, 
//        title: ""
//    });





    /* --------------------------------------------------------------------------- */
    /*  12. Contact Form
    /* --------------------------------------------------------------------------- */

    var $contactform  = $('#contact-form'),
        $success      = '<strong>Success!</strong> Your message was sent.';

    // Send the email
    $contactform.submit(function(){
        $.ajax({
            type: "POST",
            url: "php/contact.php",
            data: $(this).serialize(),
            success: function(msg) {
                if (msg == 'SEND') {
                    response = '<div class="success">'+ $success +'</div>';
                }
                else {
                    response = '<div class="error">'+ msg +'</div>';
                }
                $(".error,.success").remove();
                $contactform.prepend(response);
            }
         });
        return false;
    });    
    
    /***
     * 13 Widget Toggle
     */
    
    $(".widget h5").click(function(){
    	
    	$(this).siblings().slideToggle();
    	$(this).siblings().children().slideToggle();
    });
    

    /**
     *Jquery.lazyload.js
     */
    $("img").lazyload({ 
        threshold : 50 ,
        effect:'fadeIn',
        
    });


	/**
	 *实现自动填充文本框内容
     *@from YKG.form.autoTips();
     */
     
     YKG.app('form').autoTips();
     
     /**
      *实现评论提交
      */
     
    YKG.app('comment').submit();
    

 


    
    

 

    
});

/*-------------------------------------------------------------------------
 * windswaterflow
 * -------------------------------------------------------------------------*/

function windsWaterFlow(url, boxtemplate, columnwidth)
{
	var boxtemplate = boxtemplate?boxtemplate:'<div class="pin hide"><a href="#"><div class="img"><img src="{img}" style="" alt="" /></div></a><div class="title">{title}</div><div class="like btn">喜欢</div><div class="comments btn">评论</div></div>';
	var columnwidth = columnwidth?columnwidth:210;
	
	$(".containerBox").windswaterflow({
        itemSelector: '.pin',
        loadSelector: '#loading',
        noSelector: '#noshow',
        boxTemplate: boxtemplate,
        columnWidth: columnwidth,
        marginWidth: 14,
        marginHeight: 16,
        ajaxServer: url,
        boxParam: 'num',
        pageParam: 'page',
        maxPage: 0,
        minCols: 1,
        init: false,
        initBoxNumber: 10,
        scroll: true,
        scrollBoxNumber:10 ,
        callback: function() {          
            $(".pin").mouseover(function() {
                $(this).find(".btn").show();
            }).mouseout(function() {
                $(this).find('.btn').hide();
            });

        }
    });
}


/***
 * artDialog
 */
// 2011-07-17 更新
artDialog.fn.shake = function (){
    var style = this.DOM.wrap[0].style,
        p = [4, 8, 4, 0, -4, -8, -4, 0],
        fx = function () {
            style.marginLeft = p.shift() + 'px';
            if (p.length <= 0) {
                style.marginLeft = 0;
                clearInterval(timerId);
            };
        };
    p = p.concat(p.concat(p));
    timerId = setInterval(fx, 13);
    return this;
};


/***
 * 定义键盘事件，
 */

$(document).keydown(function(event){
	
	var e = event||window.event;
	
	var k = e.KeyCode||e.which;
	
	if ( e.ctrlKey && e.which == 77){
		console.log("yes");
		
		var dialog = art.dialog({
		    fixed: true,
		    lock:true,
		    id: 'Fm7',
		    title:'登录'
		});			
		
		$.ajax({
			url:'/site/loginajax.html',
			success:function(data){
				dialog.content(data);
				
				$("#LoginForm_password").focus(function(){
					$(this).css({
						'type':'password'
					});
				});
				
			}
		});
		
		 dialog.shake && dialog.shake();// 调用抖动接口
	}
	
	console.log(k);
	
});

/**
 *使用scroll方法激活ajax加载的内容相关的效果
 */
$(document).scroll(function(e){    
    YKG.app('comment').scrollLoadCommentChildren();
});




function ajaxLink()
{
    
}
